import React from "react";
import {Select, Input, Form, Button,Card,Row,Col} from 'antd'
import './BookingForm.css'
import {createBookingForm} from "../../api/api";
import * as antd from "antd";

const layout = {
    labelCol: {span: 4},
    wrapperCol: {span: 4},
};
const tailLayout = {
    wrapperCol: {offset: 8, span: 16},
};

const Modal = antd.Modal;

class BookingForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = ({
            carrier: 0,
            containerType: 0,
            pol: 0,
            pod: 0,
            cargoType: 0,
            trxId:0,
            objId:0,
            visible: false
        })
    }

    getCarrie = (event) =>{
        this.setState({
            carrier: event.target.value
        })
    }
    getContainerType = (event) =>{
        this.setState({
            containerType: event.target.value
        })
    }
    getPol = (event) =>{
        this.setState({
            pol: event.target.value
        })
    }
    getPod = (event) =>{
        this.setState({
            pod: event.target.value
        })
    }
    getCargoType = (event) =>{
        this.setState({
            cargoType: event.target.value
        })
    }
    onSubmit = async ()=> {
        const data = await createBookingForm();
        console.log(data.data)
        this.setState({
            trxId: data.data.data.trxId,
            objId:data.data.data.objId,
            visible: true
        })
    }

    handleOk =()=> {
        this.setState({
            confirmLoading: false,
            visible: false
        });
    }
    handleCancel =()=> {
        this.setState({
            visible: false
        });
    }

    render() {
        return (
            <Row>
                <Col span={8} offset={7}>
                    <Card style={{ width: 700}}>
                        <div>
                            <Form
                                {...layout}
                                name="bookingForm"
                            >
                                <Form.Item
                                    label="Carrier"
                                    name="carrier"
                                >
                                    <Select style={{ width: 300 }} getCarrie={this.getCarrie}>
                                        <Select.Option value="OOCL" >OOCL</Select.Option>
                                    </Select>
                                </Form.Item>
                                <Form.Item
                                    label="Container type"
                                    name="containerType"
                                >
                                    <Select style={{ width: 300 }} getContainerType={this.getContainerType}>
                                        <Select.Option value="GP" >GP</Select.Option>
                                    </Select>
                                </Form.Item>

                                <Form.Item
                                    label="Pol"
                                    name="pol"
                                >
                                    <Input style={{ width: 300 }} getPol={this.getPol}/>
                                </Form.Item>

                                <Form.Item
                                    label="Pod"
                                    name="pod"
                                >
                                    <Input style={{ width: 300 }}  getPod={this.getPod}/>
                                </Form.Item>

                                <Form.Item
                                    label="cargo type"
                                    name="cargoType"
                                >
                                    <Select style={{ width: 300 }} getCargoType={this.getCargoType}>
                                        <Select.Option value="RF" >RF</Select.Option>
                                    </Select>
                                </Form.Item>
                                <Form.Item  {...tailLayout}>
                                    <Button type="primary" htmlType="submit"  onClick={this.onSubmit}>
                                        Submit
                                    </Button>
                                </Form.Item>
                            </Form>
                            <Modal  visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel}>
                                <p>Your Ordering ID is:</p>
                                <p>{this.state.trxId}</p>
                                <p>Your Version ID is:</p>
                                <p>{this.state.objId}</p>
                            </Modal>
                        </div>
                    </Card>
                </Col>
            </Row>

        )
    }
}

export default BookingForm;